<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../static/js/jquery-3.5.1.js"></script>
<link rel="stylesheet" type="text/css" href="../static/css/CS.css">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script language="javascript" type="text/javascript">
    $(function(){
        //Slot默认分页起始page
        var Slotpage=0
        //Event默认分页起始page
        var Eventpage=0
        //already choose studyid，prepareing selecter Site
        $('#study').change(function() {
            PrepareSite();
        })
    function PrepareSite() {
        $('#site').html("");
        var ciValue=$('#site');
        $.ajax({
            url: '/getsite',
            async : true,
            type: 'get',
            dataType:'json',
            success:function (data) {
                if (data && data.length > 0) {
                    //置空
                    var html = [];
                    //放值
                    html.push('<option >——请选择Site——</option>')
                    //数据data转为jason数组
                    var opts = JSON.parse(data)
                    for(var result in opts){
                        html.push('<option value='+opts[result].siteid+'>'+opts[result].name+'</option>');
                    }
                    ciValue.val("");
                    ciValue.append(html.join(''));
                }
            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
            }
        })
    }
        //already choose siteid，prepareing selecter group
        $("#site").change(function() {
            PrepareGroup();
        })
        function PrepareGroup() {
            //$('#site').val();
            var ciValue=$('#group');
            var studyid=$('#study').val()
            var siteid=$('#site').val()
            $.ajax({
                url: '/getgroup',
                type: 'get',
                data:{"studyid":studyid,"siteid":siteid},
                dataType:'json',
                success:function (data) {
                    if (data && data.length > 0) {
                        var html = [];
                        html.push('<option>——请选择Group——</option>')
                        var opts = JSON.parse(data)
                //debug        console.log("PrepareGroup中的data数据："+data)
                        for (var result in opts) {
                            html.push('<option value="' + opts[result].groupid + '">' + opts[result].name + '</option>');
                        }
                        ciValue.val("");
                        ciValue.append(html.join(''));
                    }
                },
                error : function(errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                }
            })
        }
        //already choose groupid，prepareing selecter visit
        $("#group").change(function() {
            PrepareVisit();
        })
        function PrepareVisit() {
            var groupid=$('#group').val();
            $('#visit').html("");
            var ciValue = $('#visit');
            $.ajax({
                url: '/getvisit',
                type: 'get',
                data: {"groupid": groupid},
                dataType: 'json',
                success: function (data) {
                    if (data && data.length > 0) {
                        var html = [];
                        html.push('<option>——请选择Visit——</option>')
                        var opts = JSON.parse(data)
                        for (var result in opts) {
                            html.push('<option value=' + opts[result].visitid + '>' + opts[result].name + '</option>');
                        }
                        ciValue.val("");
                        ciValue.append(html.join(''));
                    }
                }
            })
        }
        //already choose visitid，prepareing selecter schedule
        $("#visit").change(function() {
            PrepareSche();
        })
        function PrepareSche() {
            var ciValue=$('#sche')
            $('#sche').html("");
            $.ajax({
                url: '/getsche',
                type: 'get',
                dataType: 'json',
                success: function (data) {
                    if (data && data.length > 0) {
                        var html = [];
                        html.push('<option value="0">——可选择Sche——</option>')
                        var opts = JSON.parse(data)
                        //debug console.log(opts)
                        for (var result in opts) {
                            html.push('<option value=' + opts[result].scheduleid + '>' + opts[result].name + '</option>');
                        }
                        ciValue.val("");
                        ciValue.append(html.join(''));
                    }
                }
            })
        }

        //already choose schedule，prepareing selecter slot
        //start work when button click
        $("#comfrim").click(function () {
            Prepareslot();
        })
        function Prepareslot() {
            var scheid=$('#sche').val();
            var visitid=$('#visit').val();
            //slotnum is the slot table page size
            var slotnum=$('#SlotNum').val();
            var ciValue = $('#detailsdata');
            ciValue.val("")
            $.ajax({
                url: '/getslot',
                type: 'get',
                data: {"visitid": visitid,"scheid":scheid,"slotnum":slotnum,"page":Slotpage},
                dataType: 'json',
                success: function (data) {
                    var obj=document.getElementById('detailsdata');
                    obj.innerHTML='';
                    if (data!=[]) {
                        var html = [];
                        var opts = JSON.parse(data)
                        //debug console.log(opts)
                        for (var result in opts) {
                            html.push('<tr>')
                            html.push('<td class="Tabtd1" width="140px">'+opts[result].slotid+'</td>');
                            html.push('<td style="width: 160px;height: 22px">'+opts[result].slottype+'</td>');
                            html.push('<td class="Tabtd1" width="140px">'+opts[result].createdbyuserid+'</td>');
                            html.push('<td style="width: 216.8px;height: 24px">'+opts[result].createdbytimestamp+'</td>');
                            html.push('<td class="Tabtd1" width="173px" ><input class="selectSlot" type="button"  STYLE="width: 175px" value="选择确定Event事件" ></td>');
                            html.push('</tr>')
                        }
                        ciValue.append(html.join(''));
                    }else{alert("data为"+data+"请重新选择")}
                }, error:function () {
                    alert("无结果，请重新选择")
                }
            })
        }

        //handle the Slot beforepage button
        $("#beforepage").click(function() {
            GetSlotBeforePage();
        })
        function GetSlotBeforePage() {
            Slotpage=Slotpage-1
            alert(Slotpage)
            if(Slotpage<0){
                Slotpage=0
                alert("已是第一页")
            }else {
                Prepareslot();
            }
        }
        //handle the Slot afterpage button
        $("#afterpage").click(function() {
            SlotAfterPage();
        })
        function SlotAfterPage() {
            Slotpage=Slotpage+1
            alert(Slotpage)
            Prepareslot();
        }
        //handle the Slot request and Perpare Event data
        function PrepareEvent() {
            var eventsize=$('#Eventsize').val();
            var visitid=$('#visit').val();
            var scheid=$('#sche').val();
            var slotid=$(this).closest("tr").find("td").eq(0).text()
            var ciValue = $('#eventdata');
            //alert($(this).closest("tr").find("td").eq(0).text())
           $.ajax({
                url: '/getsevent',
                type: 'get',
                data: {"visitid": visitid,"scheid":scheid,"slotid":slotid,"eventsize":eventsize,"eventNum":Eventpage},
                dataType: 'json',
                success: function (data) {
                    var opts = JSON.parse(data)
                    var obj=document.getElementById('eventdata');
                    obj.innerHTML='';
                    if (data && data.length > 0) {
                        var html = [];
                        var opts = JSON.parse(data)
                        for (var result in opts) {
                            html.push('<tr>')
                            html.push('<td class="Tabtd2" style="width: 210px;height: 22px">'+opts[result].templateeventsampletaskid+'</td>');
                            html.push('<td style="width: 82px">'+opts[result].instruction+'</td>');
                            html.push('<td class="Tabtd2" style="width: 56px;height: 24px">'+opts[result].transfer+'</td>');
                            html.push('<td class="instruction" style="width: 217px;height: 24px">'+opts[result].createdbytimestamp+'</td>');
                            html.push('<td class="Tabtd2" style="width: 100px;height: 24px">'+opts[result].cycle+'</td>');
                            html.push('<td style="width: 148px;height: 24px">'+opts[result].timepointcalculation+'</td>');
                            html.push('<td class="Tabtd2" style="width: 120px;height: 24px">'+opts[result].name+'</td>');
                            html.push('<td style="width: 97px;height: 24px">'+opts[result].barcode+'</td>');
                            html.push('<td class="Tabtd2 "><input type="text" id="eventclass" style="width: 120px" placeholder="请扫描条码" ></td>');
                            html.push('</tr>')
                        }
                        ciValue.append(html.join(''));
                    }
                },error:function () {
                    alert("error，Please message the web administrator")
                }
            })
        }

        $("#submitBarcode").click(function () {
            CommitEvent();
        })
        function CommitEvent() {
            var json111 = new Array()
            $("#eventdata").find('tr').each(function () {
                var data = {}
                data.Templateid = $(this).children('td').eq(0).text()
                data.Instruction = $(this).children('td').eq(1).text()
                data.Transfer = $(this).children('td').eq(2).text()
                data.Createstamp = $(this).children('td').eq(3).text()
                data.Cycle = $(this).children('td').eq(4).text()
                data.Timepoint = $(this).children('td').eq(5).text()
                data.Center = $(this).children('td').eq(6).text()
                data.Insidebarcode = $(this).children('td').eq(7).text()
                data.Outbarcode = $(this).children('td').eq(8).find("input").val()
                json111.push(data)
                return
            })
            var a = JSON.stringify(json111)
            $.ajax({
                url: '/storage',
                type: 'post',
                data: a,
                dataType: 'json',
                success: function () {
                    alert("success,Please take the next step")
                }
            })
        }

        $("#subBarcodetwo").click(function () {
            CommitEventTwo();
        })
        function CommitEventTwo() {
            var jsontwo = new Array()
            $("#eventdatatwo").find('tr').each(function () {
                var data = {}
                data.Templateid = $(this).children('td').eq(0).text()
                data.Instruction = $(this).children('td').eq(1).text()
                data.Transfer = $(this).children('td').eq(2).text()
                data.Createstamp = $(this).children('td').eq(3).text()
                data.Cycle = $(this).children('td').eq(4).text()
                data.Timepoint = $(this).children('td').eq(5).text()
                data.Center = $(this).children('td').eq(6).text()
                data.Insidebarcode = $(this).children('td').eq(7).text()
                data.Outbarcode = $(this).children('td').eq(8).find("input").val()
                jsontwo.push(data)
                return
            })
            var a = JSON.stringify(jsontwo)
            $.ajax({
                url: '/storagetwo',
                type: 'post',
                data: a,
                dataType: 'json',
                success: function (data) {
                    console.log(data)
                    if(data=="[]"){
                        console.log("Complete!Twice checks are consistent")
                    }else{
                        var obj=document.getElementById('finalcheck');
                        if (data && data.length > 0) {
                            var html = [];
                            var opts = JSON.parse(data)
                            for (var result in opts) {
                                html.push('<tr>')
                                html.push('<td class="Tabtd2" style="width: 210px;height: 22px">'+opts[result].templateeventsampletaskid+'</td>');
                                html.push('<td style="width: 82px">'+opts[result].instruction+'</td>');
                                html.push('<td class="Tabtd2" style="width: 56px;height: 24px">'+opts[result].transfer+'</td>');
                                html.push('<td class="instruction" style="width: 217px;height: 24px">'+opts[result].createdbytimestamp+'</td>');
                                html.push('<td class="Tabtd2" style="width: 100px;height: 24px">'+opts[result].cycle+'</td>');
                                html.push('<td style="width: 148px;height: 24px">'+opts[result].timepointcalculation+'</td>');
                                html.push('<td class="Tabtd2" style="width: 120px;height: 24px">'+opts[result].name+'</td>');
                                html.push('<td style="width: 97px;height: 24px">'+opts[result].barcode+'</td>');
                                html.push('<td class="Tabtd2 "><input type="text" id="eventclass" style="width: 120px" placeholder="请扫描条码" ></td>');
                                html.push('</tr>')
                            }
                            obj.append(html.join(''));
                        }
                    }
                }
            })
        }



        //handle the EventTwo table
        $(".PrepareTwo").click(function() {
            PrepareTwo();
            $("#eventdata").children().remove();
        })
        function PrepareTwo() {
            var obj=$('#eventdatatwo');
            $.ajax({
                url:'/preparetwo',
                type:'post',
                success:function (data) {
                    obj.innerHTML='';
                    if (data && data.length > 0) {
                        var html = [];
                        var opts = JSON.parse(data)
                        console.log(opts)
                        for (var result in opts) {
                            html.push('<tr>')
                            html.push('<td class="Tabtd2" style="width: 210px;height: 22px">'+opts[result].templateeventsampletaskid+'</td>');
                            html.push('<td style="width: 82px">'+opts[result].instruction+'</td>');
                            html.push('<td class="Tabtd2" style="width: 56px;height: 24px">'+opts[result].transfer+'</td>');
                            html.push('<td class="instruction" style="width: 217px;height: 24px">'+opts[result].createdbytimestamp+'</td>');
                            html.push('<td class="Tabtd2" style="width: 100px;height: 24px">'+opts[result].name+'</td>');
                            html.push('<td style="width: 148px;height: 24px">'+opts[result].timepointcalculation+'</td>');
                            html.push('<td class="Tabtd2" style="width: 120px;height: 24px">'+opts[result].center+'</td>');
                            html.push('<td style="width: 97px;height: 24px">'+opts[result].insidebarcode+'</td>');
                            html.push('<td class="Tabtd2 "><input type="text" id="eventclass" style="width: 120px" placeholder="请扫描条码" ></td>');
                            html.push('</tr>')
                        }
                        obj.append(html.join(''));
                    }
                }
            })
        }




            //handle the button（"点击选择Event事件"） event in Slot table
            $(document).on('click','.selectSlot',function(event){
                PrepareEvent();
            })
        //handle the Event beforepage button
        $("#eventbeforepage").click(function() {
            GetSlotBeforePage();
        })
        function GetSlotBeforePage() {
            alert(Eventpage)
            Eventpage=Eventpage-1
            if(Eventpage<0){
                Eventpage=0
                alert("已是第一页")
            }else{
                PrepareEvent();
            }
        }
        //handle the Slot afterpage button
        $("#eventafterpage").click(function() {
            EventAfterPage();
        })
        function EventAfterPage() {
            Eventpage=Eventpage+1
            alert(Eventpage)
            PrepareEvent();
        }
        //when Selector change,refresh web page
        $("#Eventsize").change(function() {
            PrepareEvent();
        })
})
</script>
<body>
<table id="data">
    <tbody>
        <tr>
            <td id="Tabtd">Study:</td>
            <td id="Tabtd">Site:</td>
            <td id="Tabtd">Group:</td>
            <td id="Tabtd">Visit:</td>
            <td style="margin-left: 0px;width: 173px;height: 24px;">Schedule(可空):</td>
            <td id="Tabtd">Solt每页数据大小:</td>
            <td>当前登录用户名：{{.item.usname}}</td>
        </tr>
        <tr>
            <td>
                <select name="study" id="study"  style="width: 140px;height: 24px">
                    <option>——请选择Study——</option>
                    {{range .stu}}
                        <option value="{{.StudyID}}">{{ .Name}}</option>
                    {{end}}
                </select>
            </td>
            <td>
                <select name="site" id="site" style="width: 160px;height: 22px" ></select>
            </td>
            <td>
                <select name="group" id="group" style="width: 140px;height: 22px" ></select>
            </td><td>
                <select name="visit" id="visit" style="width: 216.8px;height: 24px" ></select>
            </td><td>
                <select name="sche" id="sche" style="margin-left: 0px;width: 173px;height: 24px;" ></select>
            </td>
            <td>
                <select id="SlotNum" style="width: 140px;height: 24px">
                    <option value="1">1</option>
                    <option value="3">3</option>
                    <option value="5">5</option>
                    <option value="10">10</option>
                </select>
            </td>
            <td><input id="comfrim" type="button" value="提交查询"></td>

        </tr>
        <tr><td>Slot表格：</td></tr>
        <tr>
            <td class="Tabtd">SlotID</td>
            <td class="Tabtd">SlotType</td>
            <td class="Tabtd">CreatedUserID</td>
            <td class="Tabtd">CreatedTimestamp</td>
            <td class="Tabtd" style="margin-left: 0px;width: 173px;height: 24px;">Operation</td>
        </tr>
    </tbody>
</table>
<div id="float_div">当前用户：</div>
<table id="detailsdata"></table>
<div style="margin-left:731px"><input type="button" id="beforepage" value="上一页"><input style="margin-right: 0px" id="afterpage" type="button" value="下一页"></div>
<div>Event事件表格：(每页显示数据) <select id="Eventsize" style="width: 50px;height: 24px">
                                    <option value="10">10</option>
                                    <option value="5">5</option>
                                    <option value="3">3</option>
                                    <option value="1">1</option>
                                </select></div>
<table id="data">
    <tr>
        <td class="Tabtd" width="210px">TemplateEventSampleTaskID</td>
        <td class="Tabtd" width="82px">Instruction</td>
        <td class="Tabtd" width="56px">Transfer</td>
        <td class="Tabtd" width="217px">CreatedByTimeStamp</td>
        <td class="Tabtd" width="100px">Cycle</td>
        <td class="Tabtd" width="148px">TIMEpointCalculation</td>
        <td class="Tabtd" width="120px">Center</td>
        <td class="Tabtd" width="97px">InsideBarcode</td>
        <td class="Tabtd" width="124px">OutBarcode</td>
    </tr>
</table>
<!--the Event data-->
<table id="eventdata"></table>
<div style="margin-left:1000px"><input type="button" id="submitBarcode" value="提交表格"><input type="button" id="eventbeforepage" value="上一页"><input style="margin-right: 0px" id="eventafterpage" type="button" value="下一页"></div>
Event事件表格第二次核查<---按钮---><input type="button" class="PrepareTwo" value="显示核查表格"/> </div>
<table id="options">
    <tr>
        <td class="Tabtd" width="210px">TemplateEventSampleTaskID</td>
        <td class="Tabtd" width="82px">Instruction</td>
        <td class="Tabtd" width="56px">Transfer</td>
        <td class="Tabtd" width="217px">CreatedByTimeStamp</td>
        <td class="Tabtd" width="100px">Cycle</td>
        <td class="Tabtd" width="148px">TIMEpointCalculation</td>
        <td class="Tabtd" width="120px">Center</td>
        <td class="Tabtd" width="97px">InsideBarcode</td>
        <td class="Tabtd" width="124px">OutBarcode</td>
    </tr>
</table>
<table id="eventdatatwo"></table>
<div style="margin-left:1000px"><input type="button" id="subBarcodetwo" value="提交表格"><input type="button" id="eventbeforepage" value="上一页"><input style="margin-right: 0px" id="eventafterpage" type="button" value="下一页"></div>
最终核查（optional）
<table id="finalcheck">
    <tr>
        <td class="Tabtd" width="210px">TemplateEventSampleTaskID</td>
        <td class="Tabtd" width="82px">Instruction</td>
        <td class="Tabtd" width="56px">Transfer</td>
        <td class="Tabtd" width="217px">CreatedByTimeStamp</td>
        <td class="Tabtd" width="100px">Cycle</td>
        <td class="Tabtd" width="148px">TIMEpointCalculation</td>
        <td class="Tabtd" width="120px">Center</td>
        <td class="Tabtd" width="97px">InsideBarcode</td>
        <td class="Tabtd" width="124px">OutBarcode</td>
    </tr>
</table>
</body>
</html>